import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import SublimeVideo from 'react-sublime-video';
import { Player } from 'video-react';
import {
  Row, Col, Card, Form, Input, Select, Icon,
  Button, Dropdown, Menu, InputNumber,
  DatePicker, Modal, message, Badge,
  Divider, Tag, Spin
} from 'antd';
import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './RecordDetails.less';
import images from '../../assets/images.png';
import querystring from 'querystring';
import { solo } from '../../common/solo';
import { DefaultPlayer as Video } from 'react-html5video';
import 'react-html5video/dist/styles.css';
/*
 视频面签详情界面
*/
const Source = SublimeVideo.Source;
const FormItem = Form.Item;
const { Description } = DescriptionList;


@connect(({ queries }) => ({
  queries,
}))
@Form.create()
export default class RecordDetails extends PureComponent {
  state = {
    id: '',

  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    this.setState({
      id: params.id
    })
    dispatch({
      type: 'queries/videoDetails',
      payload: {
        id: params.id
      },
    });
  }

  render() {
    const { queries: { videoDetailsList, loading } } = this.props;
    const style = {
      width: 300,
      height: 400,
      margin: '0.5%',
      float: 'center',
    };

    return (
      <PageHeaderLayout title="视频面签详情">
        {
          loading ?
            <div className={styles.spinContainer}>
              <Spin size="large" />
            </div>
            :
            !videoDetailsList ? "" :
              <div>
                {console.log("12222222222", videoDetailsList)}
                <Card
                  bordered={false}
                  title="视频面签信息"
                  style={{ marginBottom: 24 }}
                >
                  <DescriptionList style={{ marginBottom: 20 }} col={2}>
                    <Description term="主叫人">
                      {videoDetailsList.caller}
                    </Description>
                    <Description term="开始时间">
                      {videoDetailsList.callTime}
                    </Description>
                    <Description term="通话人">
                      {videoDetailsList.listener}
                    </Description>
                  </DescriptionList>
                </Card>
                <Card
                  bordered={false}
                  title="申请人信息"
                  style={{ marginBottom: 24 }}
                >
                  <DescriptionList col={2}>
                    <Description term="客户姓名">
                      {videoDetailsList.custName}
                    </Description>
                    <Description term="证件号">
                      {videoDetailsList.idcard}
                    </Description>
                    <Description term="手机号">
                      {videoDetailsList.mobile}
                    </Description>
                    <Description term="贷款金额">
                      {videoDetailsList.loanAmt}
                    </Description>
                    <Description term="合作机构">
                      {videoDetailsList.merchantName}
                    </Description>
                  </DescriptionList>
                </Card>
                <Card
                  bordered={false}
                  title="面签视频"
                  style={{ marginBottom: 24 }}
                >
                  {
                    !videoDetailsList.videoFile1 ?
                      <DescriptionList col={2}>
                        <Description >
                          暂无视频
                        </Description>
                      </DescriptionList>
                      :
                      <DescriptionList col={1}>
                        <Description >
                          <video controls>
                            <source src={videoDetailsList.videoFile1} type="video/mp4" />
                          </video>
                          {/* <Button >
                            <a
                              target="_blank"
                              href={`${solo.videoDownload}${videoDetailsList.downloadvideoFile}`}
                            >
                              视频下载
                          </a>
                          </Button> */}
                        </Description>
                      </DescriptionList>}
                  <Button
                    style={{ width: '10%', marginTop: 50, marginBottom: 8 }}
                    type="primary"
                  >
                    <a href={`/#/reporting/record-list`}>
                      返回
                </a>
                  </Button>
                </Card>
              </div>
        }
      </PageHeaderLayout >
    );
  }
}
